<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%
//is the user allowed to be here?
if(!fr.upmc.utils.SessionTracker.isUserConnected(request))
{
	fr.upmc.utils.SessionTracker.redirectToHome(response);
	return;
}
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="scripts/login/css/style.css" />
    <script src="scripts/jquery/js/jquery-1.6.2.min.js"></script>
    <script src="scripts/jquery/js/jquery-ui-1.8.16.custom.min.js"></script>
    <script src="scripts/customInput.jquery.js"></script>
    <script src="scripts/login/js/login.js"></script>
    <script src="scripts/jquery/jquery.validate.js"></script>
    <link rel="stylesheet" href="scripts/jquery/css/ui-darkness/jquery-ui-1.8.16.custom.css" />
    <link rel="stylesheet" href="scripts/customInput.css" />
<title>Search contacts</title>

<script type="text/javascript">
$(document).ready(function(){
    var button = $('#logoutButton');
    var form = $('#logoutForm');
    
    button.click(function(){
    	if(confirm('Are you sure you want to logout?'))
    		form.submit();
    	else
    		return;
    });
    
    $('input:submit').button();
    $('input').customInput();
    
    $('input[type="text"]').focus(function() {
        $(this).addClass("focus");
    });
     
    $('input[type="text"]').blur(function() {
        $(this).removeClass("focus");
    });
    
    //$('input#contact').focus();
    
    $("#searchContactForm").validate();
    
    $('#searchContactSubmit').click(function(){
    	if($("#searchContactForm").valid()){
    		var q = "q=" + $('input#contact').val();
    		
    		$("#query").html('<p><img src="scripts/ajax-loader-blue.gif"/></p>');
    		$("#query").hide();
    		$("#info").hide();
    		$("#contentResult").hide();
    		setTimeout(function(){$.ajax({  
    			  type: "GET",  
    			  url: "searchContact.do",  
    			  data: q,  
    			  success: function(data) {
    				  if(data == "no_result"){
    					  $("#query").hide();
    					  $( "#info" ).html('<b><span style="color:red">No contact found with this name or ID</span></b>');
    					  $( "#info" ).fadeIn('slow');
    					  
	    				  //$( "#info" ).fadeOut(3000);
    				  }else if(data != "error"){
	    				  $( "#query" ).hide();
	    				  $("#contentResult").html(data);
	    				  $("#contentResult").show();
	    				  $("#contentResult").fadeIn('fast');
    				  }
    				  else{
    					  $( "#query" ).hide();
    					  	$( "#info" ).html("<h3>An error accured, please submit your data again</h3>");
    					  	$( "#info" ).fadeIn('slow');
    					  	$( "#info" ).fadeOut(4000);
    				  }
    			  }
    			})}, 1000);
    		
    		$("#query").show();
    			
    	}
    	
    	return false;  
    });
    
});
</script>
</head>
<body>
<div id="bar">
        <div id="container">
            <!-- Login Starts Here -->
            <div id="title">MDOC Project - Search Contacts</div>
            <div id="loginContainer">
            	<a href="accueil.jsp" id="home">Home</a>
                <a href="#" id="logoutButton"><span>Log out</span></a>
                <div style="clear:both"></div>
                <div id="loginBox">                
                    <form id="logoutForm" action="authentification.do" method="post">
                        <fieldset id="body">
                            <input type="hidden" name="action" value="logout" >
                            <input type="submit" id="logout" value="Sign out" />
                        </fieldset>
                    </form>
                </div>
            </div>
            <!-- Login Ends Here -->
		</div>
	</div>
	
<div class="container">
	<br/>
	<form id="searchContactForm" action="searchContact.do" method="post">
		<fieldset>
			<legend>Contact information</legend>
			Contact name or ID : <input type="text" id="contact" name="contact" class="required" minlength="1" size="30"/><em>*</em>
		</fieldset>
		<br/>
		<input type="submit" name="Search" id="searchContactSubmit" /> 
	</form>

	<center>
	<div id="query">
		<p></p>
	</div>
	<div id="info"></div>
	<br/><br/>
	<div id="contentResult" style="width:400px"></div>
	</center>
</div>

</body>
</html>